<template>
  <div class="pay-page-container"
       v-if="pay_info">
    <van-cell-group>
      <van-cell :border="false"
                title="订单编号"
                :value="pay_sn" />
      <van-cell :border="false"
                title="订单总金额"
                :value="'￥'+pay_info.pay_amount" />
      <van-cell :border="false"
                title="实付金额"
                :value="'￥'+pay_info.pay_amount" />
    </van-cell-group>

    <div class="pay-way">
      <div class="pay-way-title">请选择支付方式</div>
      <van-radio-group v-model="payment_info.payment_code">
        <van-cell-group :border="false">
          <van-cell :title="item.payment_name"
                    clickable
                    @click="payment_info.payment_code = item.payment_code"
                    :icon="payment_icon[item.payment_code]"
                    v-for="item in payment_list"
                    :key="item.payment_code">
            <van-radio slot="right-icon"
                       :name="item.payment_code"
                       checked-color="#e9ac64" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <div class="submit-btn-content">
      <van-button @click="submit"
                  block
                  round
                  class="btn">确认支付</van-button>
    </div>
  </div>
</template>

<script>
import {
  getOrderpayInfo,
  getVrOrderpayInfo,
  getPaymentList,
  pay,
  getRechargeInfo,
  payAuth
} from '@/api/makeOrder'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'PayPage',
  data() {
    return {
      pay_sn: this.$route.query.pay_sn ? this.$route.query.pay_sn : '',
      pay_type: this.$route.query.pay_type ? this.$route.query.pay_type : '',
      // 订单支付显示的数据
      pay_info: null,
      // 提交支付需要用到的数据
      payment_info: {
        password: '', // 支付密码
        rcb_pay: 0, // 是否使用充值卡进行支付
        pd_pay: 0, // 是否使用余额进行支付
        payment_code: '' // 支付方式
      },
      payment_list: [],
      // 支付图标设置
      payment_icon: {
        wxpay_h5: require('@/assets/image/wechat.png'),
        alipay_h5: require('@/assets/image/ali.png')
      }
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      payOpenId: state => state.user.payOpenId
    })
  },

  watch: {
    'payment_info.payment_code': {
      handler(newVal, oldVal) {
        switch (newVal) {
          case 'alipay_h5':
            payAuth(this.pay_sn, this.pay_type, newVal)
              .then(res => {
                window.location.href = res.result
              })
              .catch(res => {
                this.$toast(res.message)
              })
            break
          case 'wxpay_h5':
            if (!this.payOpenId) {
              this.$toast({
                type: 'loading',
                message: '获取微信授权中...',
                duration: 0
              })
              payAuth(this.pay_sn, this.pay_type, newVal)
                .then(res => {
                  window.location.href = res.result
                })
                .catch(res => {
                  this.$toast(res.message)
                })
            }
            break
        }
      },
      deep: true
    }
  },
  created: function() {
    // 设置微信授权openid
    this.$route.query.open_id &&
      this.setPayOpenId({
        payOpenId: this.$route.query.open_id,
        subOpenId: this.$route.query.sub_open_id
      })

    this.getPaymentList() // 获取支付方式
    this.getMemberPayInfo() // 获取订单支付信息
  },
  methods: {
    ...mapMutations({
      setPayOpenId: 'setPayOpenId'
    }),
    getPaymentList() {
      getPaymentList()
        .then(res => {
          this.payment_list = res.result.payment_list
        })
        .catch(error => {
          this.$toast({
            type: 'fail',
            message: error.message
          })
        })
    },
    getMemberPayInfo() {
      if (this.pay_type === 'pay_new') {
        getOrderpayInfo(this.pay_sn)
          .then(res => {
            if (res.result.pay_info) {
              this.pay_info = res.result.pay_info
            } else if (res.result.go_url) {
              // this.$router.push()
              window.location.href = res.result.go_url
            }
          })
          .catch(error => {
            if (error.code === 12001) {
              // 订单已经支付
              this.$router.replace({ name: 'OrderList' })
            } else {
              this.$toast({
                type: 'fail',
                message: error.message
              })
            }
          })
      } else if (this.pay_type === 'vr_pay_new') {
        getVrOrderpayInfo(this.pay_sn)
          .then(res => {
            if (res.code === 10000) {
              this.pay_info = res.result.pay_info
            }
          })
          .catch(error => {
            if (error.code === 12001) {
              // 订单已经支付
              this.$router.push({ name: 'VrOrderList' })
            } else {
              this.$toast({
                type: 'loading',
                message: error.message
              })
            }
          })
      } else if (this.pay_type === 'pd_pay') {
        getRechargeInfo(this.pay_sn)
          .then(res => {
            if (res.code === 10000) {
              this.pay_info = { pay_amount: res.result.pdinfo.pdr_amount }
            }
          })
          .catch(error => {
            this.$toast({
              type: 'fail',
              message: error.message
            })
          })
      }
    },
    submit() {
      pay(
        this.pay_sn,
        this.pay_type,
        this.payment_info,
        this.token,
        this.payOpenId.payOpenId, // 微信openid
        this.payOpenId.subOpenId // 微信授权的sub open  id
      )
        .then(res => {
          if (res.code) {
            if (res.code === 10000) {
              if (this.pay_type === 'pay_new') {
                if (res.result.go_url) {
                  window.location.href = res.result.go_url
                } else {
                  this.$router.replaceState({ name: 'OrderList' })
                }
              } else if (this.pay_type === 'vr_pay_new') {
                this.$router.push({ name: 'VrOrderList' })
              } else if (this.pay_type === 'pd_pay') {
                this.$router.push({ name: 'RechargeList' })
              }
            } else {
              this.$toast({
                type: 'success',
                message: res.message
              })
            }
          } else {
            document.write(res)
          }
        })
        .catch(error => {
          if (error.message) {
            this.$toast({
              type: 'fail',
              message: error.message
            })
          } else {
            document.write(error)
          }
        })
    }
  }
}
</script>

<style lang='scss'>
.pay-page-container {
  .pay-way {
    border-top: 8px solid #eeeeee;
    padding: 0 10px;
    .pay-way-title {
      height: 40px;
      line-height: 40px;
      color: #333333;
      font-size: 16px;
    }
    /deep/ .van-cell__left-icon {
      width: 24px;
      height: 24px;
      margin-right: 13px;
      overflow: hidden;
      line-height: 1;
    }
    /deep/ .van-icon__image {
      width: 24px;
      height: 24px;
    }
  }
  .submit-btn-content {
    margin: 35px 20px;
    .btn {
      background-color: $mainColor;
      color: #ffffff;
    }
  }
}
</style>
